<template>
    <div>
         <el-card style="margin-bottom: 20px">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>视频管理</el-breadcrumb-item>
        <el-breadcrumb-item>视频列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
          <!-- gutter是指栅格间间隔 -->
        <el-col :span="8">
          <!-- 模糊查询 -->
          <el-input placeholder="请输入视频"  v-model="search" >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getVideoList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"  @click="addDialogVisible = true">添加视频</el-button>
        </el-col>
      </el-row>
    </el-card>
        <el-card>
        <el-table :data="videoData" stripe >
          <el-table-column label="视频名称" prop="video_name"></el-table-column>
          <el-table-column label="视频介绍" prop="video_info"></el-table-column>
          <el-table-column label="视频播放" >  
            <template slot-scope="scope">
              <i class="el-icon-video-play" style="cursor:pointer" @click="playDialog(scope.row)"></i>

            </template>
          </el-table-column>
          <el-table-column label="视频状态" prop="video_status"></el-table-column>
         <el-table-column label="操作">
            <template slot-scope="scope">
            <!-- 插槽 -->
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
         </el-table-column>
         
          
        </el-table>
        </el-card>
        <el-dialog title="添加视频" :visible.sync="addDialogVisible">
           <el-form :model="addForm">
             <el-form-item label="视频名称">
                 <el-input v-model="addForm.video_name"></el-input>
             </el-form-item>
               <el-form-item label="视频介绍">
                 <el-input v-model="addForm.video_info"></el-input>
             </el-form-item>
               <el-form-item label="文件">
                 <el-upload 
                 action=""
                 :auto-upload="false"
                 :limit="1"
                 ref="upload"
                 :http-request="addVideo"

                 >
                   <el-button type="primary" size="small">点击上传</el-button>
                   <div slot="tip">只能上传视频</div>

                 </el-upload>
             </el-form-item>
           </el-form>
           <span slot="footer">
               <el-button @click="addDialogVisible=false">取消</el-button>
               <el-button type="primary" @click="addVideo">确定</el-button>
           </span>
        </el-dialog>
        <el-dialog title="视频播放" :visible.sync="playDialogVisible">
          <video 
          id="video"
          autoplay
          controls
          width="50%"
          :src="'http://127.0.0.1:3000/video/'+playData.video_id+playData.video_path"></video>
          <span slot="footer">
               <el-button @click="closeplay">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data () {
        return {
            videoData:[],
            playData:'',
            search:'',
            playDialogVisible:false,
            addDialogVisible:false,
            addForm:{
                video_name:'',
                video_info:'',
                video_status:1
            }
        }
    },
    methods: {
        async getVideoList(){
            let {data:res}=await this.$axios.get("/video/list");
            window.console.log(res);
            if (res.mate.status != 200) return this.$message.error(res.mate.msg);
            this.videoData=res.data;
        },
        async addVideo(){
            let file=this.$refs.upload.uploadFiles[0];
            // window.console.log(file);
            // 设置请求头
            let headerConfig={headers:{'Content-Type':'multipart/form-data'}}
            if(!file){
               this.$message.error('请选择文件')
               return
            }
            let formdata=new FormData()
            formdata.append('file',file.raw);
            formdata.append('video_name',this.addForm.video_name);
            formdata.append('video_info',this.addForm.video_info);
            formdata.append('video_status',this.addForm.video_status);
            let {data:res}=await this.$axios.post('/video/add',formdata,headerConfig);
            // window.console.log(res);
            this.addDialogVisible=false;
            this.getVideoList();
        },
        playDialog(row){
          this.playData=row;
          this.playDialogVisible=true;

        },
        closeplay(){
          document.getElementById('video').pause();
          this.playDialogVisible=false;

        }
    },
    created () {
        this.getVideoList();
    }
}
</script>